<template>
  <!-- 班级选择弹框 -->
  <van-popup v-model:show="showClass" position="bottom">
    <div class="xk">
      <div class="title">学科</div>
      <van-radio-group
        v-model="params.subjectId"
        direction="horizontal"
        @change="change"
      >
        <van-radio
          class="mb10"
          :name="item.id"
          v-for="item in subjectList"
          :key="item.id"
          >{{ item.name }}</van-radio
        >
      </van-radio-group>
      <div class="title" @click="showMonth = true">
        开班月份:{{ formatter(time) }}
      </div>
      <van-datetime-picker
        v-if="showMonth"
        v-model="time"
        type="year-month"
        title="开班月份"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="showMonth = false"
        @cancel="showMonth = false"
        @change="change"
      />
      <van-cell-group>
        <van-cell
          v-for="item in list"
          :key="item.id"
          :title="item.name"
          @click="classSelect({ id: item.id, name: item.name })"
        ></van-cell>
      </van-cell-group>
    </div>
  </van-popup>
</template>
<script setup>
import { subject, subjectCls } from '@/api/index'
import { ref } from 'vue'
import moment from 'moment'
// 班级选择
const showClass = ref(false)
const minDate = new Date(2020, 0, 1)
const nowDate = new Date()
nowDate.setYear(nowDate.getFullYear() + 1)
const maxDate = nowDate
const time = ref(new Date())
const showMonth = ref(false)
const formatter = val => {
  return moment(val).format('YYYY-MM-DD')
}
// 获取班级列表数据
const subjectId = ref('')
const subjectList = ref([])
const getSubjectList = async () => {
  const res = await subject()
  subjectList.value = res.result.data
}
getSubjectList()

// 时间与学科选择修改时调用
const params = ref({
  subjectId: '',
  year: '',
  month: ''
})
const list = ref([])
async function change () {
  const t = new Date(time.value)
  params.value.year = t.getFullYear()
  params.value.month = t.getMonth() + 1
  console.log(params.value)
  try {
    const res = await subjectCls(params.value)
    list.value = res.result.data.rows
  } catch {
    list.value = []
  }
}

// 班级点击
const emits = defineEmits(['setClass'])
const classSelect = str => {
  emits('setClass', str)
  // 关闭弹框
  showClass.value = false
}

defineExpose({ showClass })
</script>
<style lang="scss" scoped>
.mb10 {
  margin-bottom: 10px;
}
.xk {
  padding: 15px;
  .title {
    margin-bottom: 10px;
  }
}
</style>
